<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Merchandise :: Hambaa.com</title>
<link rel="stylesheet" type="text/css" href="styles/Gallery_details.css" />
<link rel="stylesheet" type="text/css" href="styles/Graphitti_style2.css" />
<link rel="stylesheet" type="text/css" href="styles/Cart.css" />
<link rel="stylesheet" type="text/css" href="styles/PureCSSMenu.css" />
<link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>


<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
-->

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="javascript/cart.js"></script>
<script src="jquery.js"></script>
<!--<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>-->

<script>
contextInfo = new Object(); 
contextInfo['currenProductId']='';
contextInfo['currenProductAttribute1']='';
contextInfo['currenProductAttribute2']='';
 
mapAttributes = new Object(); //Global
$(document).ready(function(){
	showDetails();
	function showDetails(){
	var attributes = '';
	if(mapAttributes){
//		alert('in here');
		var keys = Object.keys(mapAttributes);
	//	alert(keys);					
		for(key in keys){
		 console.log(key);	
		 attributes+=keys[key]+','+mapAttributes[keys[key]]+',';
		}
		if(attributes != ''){
			attributes = attributes.substring(0,(attributes.length -1));
		}
	}	
	$.ajax({url:"rest/data/getProductDetails.php",
	type:'GET',
	
	data : {productId:productId,attributes:attributes},
	success:function(result){
		
	details = JSON.parse(result);
	//alert(result);
	
	//Re-initialise productId every time product details response received
	contextInfo['currenProductId']=details.product.productId;		

	//Initialise Product Description variable
	var productDescription='';
	
	//Add Product Description Header
	productDescription+='<table id="hor-zebra" border="0" >'+
						'<thead>'+
						'<tr>'+
						'<th scope="col" colspan="2" id="productDescriptionHeader">Product Description : '+details.product.productName+
						'</th>'+
        				'</tr>'+
						'</thead>';
	
	//Add General Description
	productDescription+='<tbody>'+
    					'<tr class="odd">'+
						'<td colspan="2">General Description</td>'+   
				        '</tr>'+
						'<tr>'+
			        	'<td colspan="2" id="productDescriptionText">'+details.product.productDesc
						'</td>'+
						'</tr>';

	//Adding rows for other attrbiutes
	var k=0;
	while(details.properties[k]){ 
	var l=0;
	productDescription+='<tr class="odd">'+
						'<td colspan="2">'+details.properties[k].key+'</td>'+
						'</tr>';
		while(details.properties[k].value[l]){			
		productDescription+='<tr>'+
							'<td width="25%">'+details.properties[k].value[l].key+'</td>'+
							'<td width="75%">'+details.properties[k].value[l].value+'</td>'+
							'</tr>';		

							contextInfo['currenProductAttribute'+(l+1)+'']=details.properties[k].value[l].value;
							//do not remove
							//alert(details.properties[k].key+details.properties[k].value[l].key+details.properties[k].value[l].value);
		l++;
		}
	k++;
	}

	//End Product Description table body and table
	productDescription+='</tbody>'+
						'</table>';
	//Place the table						
	document.getElementById('productDescription').innerHTML=productDescription;
		
		
	//populate Details area	
				
				
				//image
				document.getElementById('detailsmain').src='images/tshirts/'+details.product.productId+'.jpg';
				document.getElementById('details1').src='images/tshirts/'+details.product.productId+'.jpg';
				document.getElementById('details2').src='images/tshirts/'+details.product.productId+'.jpg';
				document.getElementById('details3').src='images/tshirts/'+details.product.productId+'.jpg';
				//wishlist
				document.getElementById('addtomywishlist').href='mywishlist.php?productId='+productId+'&timefilter=all';
				//tshirt_info
				document.getElementById('productName').innerHTML=details.product.productName;
				document.getElementById('productPrice').innerHTML=details.product.productPrice;
				document.getElementById('productDiscountPrice').innerHTML=details.product.productDiscountPrice;				
				document.getElementById('productDiscountPercent').innerHTML=details.product.productDiscountPercent;								
				document.getElementById('shipping').innerHTML=details.product.shipping;	
				document.getElementById('productAvailability').innerHTML=details.product.productAvailability;	
				document.getElementById('discount').innerHTML=details.product.productPrice-details.product.productDiscountPrice;								
				var j=0;
				while(details.attributes[j]){ 	
					var attributeName = "attribute" + j;
					document.getElementById(attributeName).innerHTML=details.attributes[j].key;
					document.getElementById(attributeName).name=details.attributes[j].key;
					var i=0;
					var attributeValueName = "attribute"+ j + "values";
					document.getElementById(attributeValueName).innerHTML="";
					while(details.attributes[j].value[i]){

						if(details.attributes[j].value[i]==contextInfo['currenProductAttribute1'] ||
						   details.attributes[j].value[i]==contextInfo['currenProductAttribute2'])
						{						
						mapAttributes[details.attributes[j].key]=details.attributes[j].value[i];
						document.getElementById(attributeValueName).innerHTML+='<img id="'+details.attributes[j].value[i]+'" class="attrVal" border="1" style="padding:1px" src="images/attributes/'+details.attributes[j].value[i]+'.gif" name = "'+details.attributes[j].key+'" title = "'+details.attributes[j].value[i]+'"> ';
						}
						else
						{
						document.getElementById(attributeValueName).innerHTML+='<img id="'+details.attributes[j].value[i]+'" class="attrVal"  src="images/attributes/'+details.attributes[j].value[i]+'.gif" name = "'+details.attributes[j].key+'" title = "'+details.attributes[j].value[i]+'"> ';
						}
						i++;
					}
					j++;
				}
				
				var thumbs='';
				for (m=1;m<=4;m++){
				//alert(index.productInfo[i].productId);
					//if(details.similar[m].productId==contextInfo['currenProductId'])
					//continue;
					thumbs+='<li>'+
							'<a href="details.php?productId='+details.similar[m].productId+'" >'+
							'<img  src="images/tshirts/'+details.similar[m].productId+'.jpg" width="180" height="180"  />'+
							'</a>'+
							'<span>'+
							'Available in '+
							'<img src="images/attributes/Red.gif"> '+
							'<img src="images/attributes/Blue.gif"><br>'+
							'Rs. <strike>&nbsp;'+details.similar[m].productPrice+'&nbsp;</strike> '+ details.similar[m].productDiscountPrice+
							'</span>'+														
							'</li>';	
							//alert(details.similar[m].productPrice+'&nbsp;'+ details.similar[m].productDiscountPrice);
					
				}

				document.getElementById('thumbs').innerHTML=thumbs;
				
	
	},
	error:function(result){
		alert("error");	
	}
	});
	
	}
	

	$("#addtocart").click(function(){	
	var productId=contextInfo['currenProductId'];
	$.ajax({url:"rest/data/addtoCart.php",
	type:'GET',
	data : {productId:productId}/*,quantity:qty,productName:,rate:,size:size}*/,
	success:function(result){
	if(result ){
	document.getElementById('light').style.display='block';
	document.getElementById('fade').style.display='block';
	var addmsg="'<font color='#FF0000'>"+details.product.productName+"</font>' has been added to your cart";
	getShoppingCart(addmsg);
		}
	},
	error:function(result){
		alert("error");
	}
	});
	});

$(document).delegate('.attrVal','click',function(event){
		var attributeKey=($(this).attr('name'));
		var attributeValue=($(this).attr('id'));
		mapAttributes[attributeKey]=attributeValue;
		//alert(mapAttributes[attributeKey]);
		showDetails();
		
	});

});


	
		

	
</script>
<style>

.ui-tooltip {
    display:none;
    font-size:12px;
    height:10px;
    z-index: 99;/* for IE */
}
</style>

</head>
<body>
<table id="headertable"  border="0" align="center" width="950" height="118"  >
<tr >
<td height="114" align="right" valign="bottom">
<a href="index.php"><img src="images/logopng.png" width="103" height="99" /></a></td>
<td align="left" valign="top">
<a href="index.php"><img src="images/hambaa_logo_newjpg.jpg" width="308" height="107" /></a>
</td>
<td valign="top" align="right">
    <table id="containertable" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td align="right">
        <div id="menulinks">
        <a href="index.php" class="active">Home</a>
        <a href="offers.php">Offers</a>
        <a href="about_us.php">About Us</a>
        <a href="contact_us.php">Contact Us</a>
        </div>
    </td>
    </tr>
    </table></td>
</tr>
</table>




<table id="hotitem_cart" border="0" width="950"  align="center" bgcolor="#FFFFFF" >
<tr>
<td width="8"></td>
<td width="369">
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui"><a class="pureCssMenui" href="men.php"><span>Men</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		
		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Shirts</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="pureCssMenum">
			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Half Sleeve</a></li>
			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Full Sleeve</a></li>
			<li class="pureCssMenui"><a class="pureCssMenui" href="#">Striped</a></li>
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Trousers</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="pureCssMenum">
			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Formal</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="pureCssMenum">
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Chrome</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Mozilla</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Opera</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Netscape Navigator</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
			<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Jeans</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul class="pureCssMenum">
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Firefox</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Safari</a></li>
				<li class="pureCssMenui"><a class="pureCssMenui" href="#">Internet Explorer</a></li>
			</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
			
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	<li class="pureCssMenui"><a class="pureCssMenui" href="women.php"><span>Women</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="pureCssMenum">
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Sarees</a></li>
		<li class="pureCssMenui"><a class="pureCssMenui" href="#">Salwars</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>

</td>
<td width="164"><img src="images/hot_items.png" width="164" height="61" /></td>
<td width="56">
        <img src="images/tshirts/10001.jpg" onclick="select(this)" height="55" width="55" />
</td>
        <td width="56">
        <img src="images/tshirts/10002.jpg" onclick="select(this)" height="55" width="55" />
        </td>
        <td width="56">
        <img src="images/tshirts/10003.jpg" height="55" width="55" />
        </td>
         <td width="56">
        <img src="images/tshirts/10004.jpg" height="55" width="55"  />
        </td>

<td  align="right" width="147">

<a href = "javascript:void(0)" class="cartbtn" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';getShoppingCart()"><table border="0"><tr><td><img src="images/shopping_cart1.png" width="41" height="41" /></td>
<td>Cart(<span  id="order_count"></span>)</td></tr></table></a>

	<div id="light" class="white_content" >
        <div id="close_button" style="position:fixed;width:inherit;float:right" >
        <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"   ><img src="images/Close-button.png"  /></a>
        </div>   
 		<div id="table_container" style="overflow:auto" >
			<!--table created here-->             
        </div>
    </div>

	<div id="fade" class="black_overlay" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" />

</td>
</tr>

</table>


<table id="outertable" border="0" width="950" height="269" align="center" bgcolor="#FFFFFF" >

<tr >
<td id="tshirt_image" width="250" valign="top" align="center">
	<img id="detailsmain" src="images/NoImageAvailable.jpg" height="240" width="240"/>
	<hr />
    
   <table border="0">
    	<tr>
        <td>
        <img id="details1" src="NoImageAvailable" height="80" width="80"/>
        </td>        
        <td>
        <img id="details2" src="NoImageAvailable" height="80" width="80"/>
        </td>        
        <td>
        <img id="details3" src="NoImageAvailable" height="80" width="80"/>
        </td>        
        </tr>
    </table>
    
    
</td>
      
<td width="533" valign="top">
    
    <table id="tshirt_info" border="0"  align="center"  cellspacing="2" width="100%" >
    <tr><td colspan="3"><h1><span id="productName"></span></h1>
    </td></tr>
    <tr>
    <td colspan="2">Price: <strike>Rs.<span id="productPrice"></span></strike> <font color="#FF0000" size="6">Rs. <span id="productDiscountPrice"></span></font>
    
    </td>
    <td><h5><span id="shipping"></span></h5></td>
    </tr>
    <tr>
    <td width="47%">Discount: Rs. <span id="discount"></span> <font color="#FF0000" >(<span id="productDiscountPercent"></span>% Off)</font><br>(Prices are inclusive of all taxes)</td>
    <td width="16%"><h4><span id="productAvailability"></span></h4></td>
    <td width="37%">Delivered in 3 to 5 days</td>
    </tr>
    <tr>
    <td>
    <span id="attribute0"></span>		
    <span id="attribute0values"></span>		
	</td>    
	<td colspan="2">
    <span id="attribute1"></span>		
    <span id="attribute1values"></span>		    
    </td>
	</tr>    
    <tr>
    <td></td>
    <td colspan="2">
    </td>
    </tr>

    <tr><td align="center">
    <a href = "javascript:void(0)" id="addtocart" class="wishbtn" onclick = "#"  title="add product to your cart" >
     Add to Cart</a></td>
    <td align="left" colspan=""><img src="images/separator.png" /></td>
    <td>Cash On Delivery available</td>
    </tr>
    
    <tr>
    <td align="center">
    <span style="background-color:#0099CC;  padding:5px">
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';getShoppingCart()"> View Cart </a></span>
    <td colspan="2" align="center">


<span style="background-color:#0099CC;  padding:5px">
<a id="addtomywishlist"> + Add to My Wishlist</a></span>
    
    </td>
    
    

    </table>


</td>
<td width="145" valign="top">
		<table id="innerright" border="0" cellspacing="0"   align="center">
		<tr><td  align="center">Brought to you by</td></tr>
		<tr>
		<td  align="center">
        <img src="images/logopng.png" width="94" height="92" />
        <h4>&nbsp;hambaa originals&nbsp;</h4>
        </td></tr>
	    </table>
</td>

</tr>


<tr >
<td colspan="2" align="right">
<hr />
<!--<table id="hor-zebra"  border="1" >
 <thead>
    	<tr>
        	<th scope="col" colspan="7">Try these as well</th>
        </tr>
    </thead>
    <tbody>  
        <tr align="center">
        	<td height="150"><img src="images/tshirts/ts1.jpg" width="150" height="150" /></td>
        	<td><img src="images/tshirts/ts2.jpg" width="100" height="100" /></td>
        	<td><img src="images/tshirts/ts3.jpg" width="100" height="100" /></td>
        	<td><img src="images/tshirts/ts4.jpg" width="100" height="100" /></td>
        	<td><img src="images/tshirts/ts6.jpg" width="100" height="100" /></td>
        </tr>
    </tbody>
</table>
-->

<table id="hor-zebra"  border="0" >
 <thead>
    	<tr>
        	<th scope="col" colspan="7">Try these as well</th>
        </tr>
    </thead>
    <tbody>  
        <tr align="center">
        	<td><ul id="gallery"><span id="thumbs"></span></ul></td>
        </tr>
    </tbody>
</table>
<hr />  
<span id="productDescription"></span>
<br>
<td></td>

</tr>
</table>




 



<br />






<div id="footer" > 


<table border="0" width="952" height=154 align="center" >
<tr>
<td >
<h1>My Hambaa</h1>
</td>
<td >
<h1>Shopping Policies</h1>













</td>
<td >
<h1>Payment Information</h1>
</td>
<td >
<h1>Contact Us</h1>
</td>
</tr>

<tr>
<td>
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';getShoppingCart()">My Cart</a> |
<a href="about_us.php">My Order</a> |
<a href="about_us.php">FAQs</a>
</td>

<td >
<a href="about_us.php">Return Policy</a> |
<a href="about_us.php">Refund Policy</a> |
<a href="about_us.php">Terms and Conditions</a>
</td>

<td >
<a href="about_us.php">Payment Options: </a>COD
</td>

<td >
e-mail:
<a href="mailto:care@hambaa.com">care@hambaa.com</a>
</td>
</tr>

<tr align="center"><td colspan="4">
<hr />

&copy;2012 All Rights Reserved by <a href="index.php">www.hambaa.com</a>
</td></tr>
</table>
</div>

<script type="text/JavaScript">

eval(location.search.substring(1));

/*
document.getElementById('detailsmain').src='images/tshirts/ts'+productId+'.jpg';
document.getElementById('details1').src='images/tshirts/ts'+productId+'.jpg';
document.getElementById('details2').src='images/tshirts/ts'+productId+'.jpg';
document.getElementById('details3').src='images/tshirts/ts'+productId+'.jpg';
function select(el) {
    el.style.border = "1px solid blue";
}*/

// Bind the hover event to the function
		$('#gallery').delegate('li','hover',function(event) {
		$('span',this).slideToggle('fast');
		});

</script>
</body>
</html>
